import { reactive, toRefs } from 'vue'
import axios from 'axios';
axios.defaults.baseURL = '/api'

const ENVKEY = 'yunnb-env'
let env = JSON.parse(sessionStorage.getItem(ENVKEY) ?? '{"auth":null}'),
    saveEnv = () => sessionStorage.setItem(ENVKEY, JSON.stringify(env));

axios.interceptors.request.use(config => {
    if (env?.auth?.token) {
        config.headers['X-Token'] = env.auth.token;
        config.headers['X-Sid'] = env.auth.sid;
    }
    return config;
})

function SessionMgr() {
    let data = reactive({
        logined: env.auth !== null,
        auth: env.auth
    })

    this.login = (auth) => {
        data.logined = true;
        sessionStorage.setItem('auth', JSON.stringify(auth))
        data.auth = auth;
        env.auth = auth;
        saveEnv();
    }
    this.logout = () => {
        data.auth = env.auth = null;
        data.logined = false;
        saveEnv();
    }
    Object.assign(this, toRefs(data))
}

let Session = new SessionMgr()
const uicls = ['ui-pc', 'ui-pad', 'ui-mobile'];

function UIModeMgr() {
    let isCollapse = false, menuMode = 1, data = reactive({
        menuMode, // 0 菜单在左侧   1 菜单在顶部
        mode: 0,
        width: 0,
        height: 0,
        mw: 0, mh: 0,
        isCollapse
    }), h = document.querySelector('html');

    // 跟随浏览器设置 dark.
    if (!env.hasOwnProperty('dark')) {
        if (window.matchMedia) {
            let ret = window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
                if (e.matches) {
                    data.dark = true;
                    h.classList.add('dark')
                } else {
                    data.dark = false;
                    h.classList.remove('dark');
                }
            });
            data.dark = window.matchMedia('(prefers-color-scheme: dark)').matches ? true : false;
            data.dark && h.classList.add('dark');
        }
    }

    this.set = (w, h) => {
        let mode = 0;
        if (w < 768) mode = 2;
        else if (w < 1200) mode = 1;

        if (data.mode != mode) {
            data.mode = mode;
            document.body.className = uicls[mode];
            if (2 == mode) isCollapse = true;
            else if (0 == mode) isCollapse = false;
        }
        if (data.width != w || data.isCollapse != isCollapse || data.menuMode != menuMode) {
            if (menuMode == 0) {
                data.width = w;
                switch (mode) {
                    case 0:
                    case 1:
                        data.mw = w - (isCollapse ? 64 : 200)
                        break;
                    case 2:
                        data.mw = w;
                        break;
                }
            } else if (menuMode == 1) {
                data.mw = w;
            }
        }
        if (data.height != h) {
            data.height = h;
            data.mh = h - 48
        }
        console.log(data.height, data.mh)
        data.isCollapse = isCollapse;
        data.menuMode = menuMode;
    };
    this.toggleCollapse = () => {
        isCollapse = !data.isCollapse;
        this.set(window.innerWidth, window.innerHeight);
        return data.isCollapse;
    }
    this.setCollapse = (v) => {
        if (v != isCollapse) {
            isCollapse = v;
            this.set(window.innerWidth, window.innerHeight);
        }
    }
    this.toggleDark = (dark) => {
        let d = dark ? true : false;
        if (data.dark != d) {
            (data.dark = dark) ? h.classList.add('dark') : h.classList.remove('dark');
        }
    }
    this.toggleMenuMode = () => {
        menuMode = menuMode == 1 ? 0 : 1;
        this.set(window.innerWidth, window.innerHeight);
        return menuMode;
    }

    Object.assign(this, toRefs(data), {
        UI_PC: 0,
        UI_PAD: 1,
        UI_MOBILE: 2,
    })
}

let UIMode = new UIModeMgr()

let index = {
    version: '1.0.0',
    Session,
    UIMode
}

export default index
export { Session, UIMode }
